<script setup lang="ts">
import baseTable from '../../components/table/baseTable.vue'
import searchForm from '../../components/searchForm/index.vue'
// @ts-ignore
import type { Dayjs } from 'dayjs';
import { FormList } from '@/components/searchForm/searchFormInterface.ts'
import {Column, Pagination} from "@/components/table/baseTableInterface.ts";
import {ref, onMounted} from 'vue'
interface TableData {
  id: number;
  name: string;
  age: number;
}
const columns: Column[] = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
];
const dataSource: TableData[] = [
  { id: 1, name: 'John', age: 25,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  // Add more data as needed
];

const formValue: Ref = ref([])

const onlineOptions = [
  {label:'离线',value:'false'},
  {label:'在线',value:'true'}
]
const sexOptions = [
  {label:'男',value:'1'},
  {label:'女',value:'0'}
]
const searchFormInfo: FormList = {
  item:[
    {
      label:'任务昵称',
      rule: [{ required: false, message: '请输入任务昵称' }],
      type: 'input',
      defaultValue: '',
      inputOptions:{
        maxLength: 30,
        showCount: true,
      },
      placeholder: '请输入任务昵称',
      event: '',
      prop:'displayName'
    },
    {
      label:'条件信息',
      rule:[{ required: false, message: '请选择条件信息' }],
      type:'select',
      selectOptions: {options: sexOptions},
      defaultValue:'',
      placeholder: '请选择条件信息',
      event:'',
      prop:'sex'
    },
    {
      label:'任务状态',
      rule:[{ required: false, message: '请选择任务状态' }],
      type:'select',
      selectOptions: {options: sexOptions},
      defaultValue:'',
      placeholder: '请选择任务状态',
      event:'',
      prop:'sex'
    },
    {
      label:'奖励渠道',
      rule:[{ required: false, message: '请选择奖励渠道' }],
      type:'select',
      selectOptions: {options: onlineOptions},
      defaultValue: '',
      placeholder: '请选择奖励渠道',
      event:'',
      prop:'online'
    },
    {
      label:'周期时间',
      rule:[{ required: false, message: '请选择周期时间' }],
      type:'select',
      selectOptions: {options: onlineOptions},
      defaultValue: '',
      placeholder: '请选择周期时间',
      event:'',
      prop:'online'
    },
  ],
  searchButton:{
    show:true,
    event: submitInfo
  },
  resetButton:{
    show:true,
    event:''
  }
}

function submitInfo(value:any){
  const openDate:Dayjs = value.openDate
  console.log('++++submitInfo.value++++', openDate.format('YYYY-MM__DD'))
}

const loading = ref(true);
const pagination: Pagination = {
  current: 1,
  pageSize: 10,
};

onMounted(()=>{
  setTimeout(()=>{
    loading.value = false
  },1000)
})

const handleTableChange = (pagination: Pagination, filters: any, sorter: any) => {
  console.log('pagination', pagination,filters,sorter)
  // Handle table change event
};

</script>

<template>
  <searchForm :search-form-list="searchFormInfo"
              :form-value="formValue"
  ></searchForm>
  <base-table
      :columns="columns"
      :data-source="dataSource"
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
  >
    <template v-slot:bodyCell="{ scope, record, text }">
      <span v-if="scope.column.key === 'age'"  >
        <span v-if="record.age < 18" style="color: red">{{ text }}</span>
        <span v-else>{{ text }}</span>
      </span >
    </template>
  </base-table>

</template>

<style scoped>

</style>